<template>
  <!--  内容登录-->
  <div id="d1">
    <el-row :gutter="30">
      <el-col :span="8" >
        <img src="/imgs/login.png">
      </el-col>
      <el-col :span="16">
        <div style="width: 385px;height: 346px;margin:70px 0px 0 60px " >
          <el-form ref="form" :model="loginForm" label-width="80px" @submit.native.prevent="submitForm">
            <h2>登录</h2>

            <el-form-item label="用户名" prop="username">
              <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="password">
              <el-input v-model="loginForm.password" placeholder="请输入密码" show-password></el-input>
            </el-form-item>

            <el-form-item prop="agree">
              <label>
                <el-checkbox v-model="loginForm.agree">我已阅读并同意</el-checkbox>
                <a href="" style="color: red; text-decoration: none;">《星辰用户服务协议》</a>
                <a href="" style="color: red; text-decoration: none;">《隐私政策》</a>
              </label>
            </el-form-item>

            <el-form-item style="margin-bottom: 20px">
              <el-button type="primary" :disabled="!loginForm.agree" native-type="submit" style="width: 100px">登录</el-button>
            </el-form-item>
          </el-form>

        </div>

      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        agree: false
      }
    };
  },
  methods: {
    submitForm() {
      if (this.loginForm.agree) {
        // 执行登录逻辑
        console.log('登录成功');
      } else {
        this.$message.warning('请阅读并同意协议');
      }
    }
  }
};
</script>

<style scoped>
h2 {
  text-align: center;
  margin-bottom: 20px;
}

a {
  margin-left: 5px;
}
#prompt-text {
  font-family: PingFangSC-Regular;
  font-size: 26px;
  color: #999999;
  margin-top: 10px;
  margin-left: 65px;
}
#d1{
  margin: 0 auto;
  width: 1200px;
}
</style>